import React from 'react';
import axios from 'axios';
import {
    Form, Icon, Input, Button, Checkbox
} from 'antd';

class NormalLoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            remember: false
        };
        this.getMsg = this.getMsg.bind(this)
    }
    componentWillMount() {
        let _this = this
        setTimeout(function () {
            _this.getMsg()
        },10)

    }
    getMsg(){
        let loginData = localStorage.getItem("loginState")
        let remember = loginData ? JSON.parse(loginData).remember * 1 : 0
        if(remember){
            this.setState({
                username: JSON.parse(loginData).name,
                password: JSON.parse(loginData).psw,
                remember: true
            });
            this.props.form.username =  JSON.parse(loginData).name
        }

    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                //登录axios
                axios.get('https://beta-apiactivity.jinvovo.com/pig/index/firstGive')
                    .then(res => {
                        this.setState({ posts:1 });
                    }).catch(err =>{
                    console.log(err)
                });

                let loginData = {
                    name:values.username,
                    psw:values.password,
                    remember:values.remember ? 1 : 0,
                    isLogin: 1
                }
                localStorage.setItem("loginState", JSON.stringify(loginData))
                window.location.href="/tacos/bus1"

            }
        });
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className='login-con'>
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入用户名' }],
                            initialValue: this.state.username,
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名"/>
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码' }],
                            initialValue: this.state.password,
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                            initialValue: this.state.remember,
                        })(
                            <Checkbox>记住密码</Checkbox>
                        )}
                        <Button type="primary" htmlType="submit" className="login-form-button m_l_16">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>

        );
    }
}


const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);

export default WrappedNormalLoginForm
